<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-22 12:48
 * Desc: couponDetail 券详情
 */
-->
<template>
  <u-overlay :show="show" class="coupon-detail">
    <view class="coupon-detail__content">
      <shop-detail order-type="mall" :obj="arr[topSwiperIndex]"></shop-detail>
      <view class="coupon-detail__middle">
        <view class="coupon-detail__middle--circle-top"> </view>
        <view class="coupon-detail__middle--dashed"></view>
        <view class="coupon-detail__middle--circle-bottom"></view>
      </view>
      <view class="coupon-detail__bottom">
        <view class="coupon-detail__num mb20">{{
          arr[topSwiperIndex].name
        }}</view>

        <view class="coupon-detail__swiper-box">
          <view @click.stop="changeQr('pre')" class="coupon-detail__left-arrow"
            ><u-icon name="arrow-left-double"></u-icon
          ></view>
          <swiper
            :indicator-dots="false"
            :current="topSwiperIndex"
            class="coupon-detail__swiper"
            @change="topSwiperTab"
          >
            <swiper-item v-for="(item, index) in qrUrl" :key="index">
              <zm-image :src="item" width="326rpx" height="326rpx"> </zm-image>
            </swiper-item>
          </swiper>
          <view
            @click.stop="changeQr('append')"
            class="coupon-detail__right-arrow"
            ><u-icon name="arrow-right-double"></u-icon
          ></view>
        </view>
        <view class="fc-yellow fs28 b">{{ arr[topSwiperIndex].checkTip }}</view>
        <view class="coupon-detail__code mb20 mt20">
          <text>券&emsp;码:</text
          ><text class="ml20 black">{{
            arr[topSwiperIndex].interfacePickUpCode || arr[topSwiperIndex].code
          }}</text>
        </view>
        <view class="coupon-detail__code">
          <text>有效期:</text
          ><text class="ml20 black">{{ arr[topSwiperIndex].expireTime }}</text>
        </view>
      </view>
    </view>
    <view class="coupon-detail__close" @click="onClose"></view>
    <address-list
      :business-name="arr[topSwiperIndex].businessName"
      :address-list="shopList"
      v-if="addressShow"
      v-model="addressShow"
    ></address-list>
  </u-overlay>
</template>
<script>
  import ZmImage from '@/commons/ZmImage'
  import { callTelephone } from '@/utils/tools'
  import AddressList from './addressList.vue'
  import ShopDetail from '@/pagesOrder/order/components/ShopDetail.vue'
  export default {
    name: 'CouponDetail',
    components: { ZmImage, AddressList, ShopDetail },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      },
      arr: {
        type: Array,
        default: () => {
          return []
        }
      },
      qrUrl: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        topSwiperIndex: 0,
        addressShow: false
      }
    },
    created() {
      this.getIndex()
    },
    watch: {
      obj: {
        handler() {
          this.getIndex()
        },
        deep: true
      }
    },
    methods: {
      getIndex() {
        console.log('getIndex', this.arr, this.obj)
        this.topSwiperIndex = this.arr.findIndex(
          (item) => item.couponId === this.obj.couponId
        )
        if (this.topSwiperIndex === -1) {
          this.topSwiperIndex = 0
        }

        console.log('this.topSwiperIndex', this.topSwiperIndex)
      },
      onClose() {
        this.$emit('input', false)
      },
      showAddress() {
        this.addressShow = true
      },
      topSwiperTab(e) {
        this.topSwiperIndex = Number(e.target.current)
      },
      changeQr(type) {
        if (type === 'pre') {
          this.topSwiperIndex =
            this.topSwiperIndex !== 0
              ? this.topSwiperIndex - 1
              : this.qrUrl.length - 1
        } else {
          this.topSwiperIndex =
            this.qrUrl.length - 1 === this.topSwiperIndex
              ? 0
              : this.topSwiperIndex + 1
        }
      },
      call(p) {
        callTelephone(p)
      }
    },
    computed: {
      shopList() {
        console.log('shopList arr', this.arr)
        return this.arr[this.topSwiperIndex].businessDetail
      },
      // qrUrl() {
      //   const arr = []
      //   this.arr.forEach((item) => {
      //     arr.push(this.$utils.qrcodeCreate(item.code))
      //   })
      //   return arr
      // },
      show: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .coupon-detail {
    color: black;
    .name {
      font-weight: bold;
      font-size: 32upx;
      margin-bottom: 20upx;
    }
    &__content {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      margin-top: 300upx;
      width: 710upx;
      // height: 821upx;
      background: #ffffff;
      border-radius: 20upx;
    }
    &__top {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &__phone {
      min-width: 55upx;
      margin-left: auto;
      flex-direction: column;
      align-items: center;
      color: #888888;
      font-size: 26upx;
    }
    &__middle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 30upx;
    }
    &__middle--dashed {
      width: 646upx;
      height: 1upx;
      border: 1upx dashed #f9f8f8;
    }
    &__middle--circle-top {
      width: 17upx;
      height: 28upx;
      border-radius: 0 50% 50% 0;
      background: #000;
      opacity: 0.5;
    }
    &__middle--circle-bottom {
      width: 17upx;
      height: 28upx;
      border-radius: 50% 0 0 50%;
      background: #000;
      opacity: 0.5;
    }
    &__top {
      display: flex;
      justify-content: space-between;
      flex: 1;
      padding: 35upx 27upx 28upx 27upx;
    }
    &__bottom {
      padding: 41upx 0 47upx;
      // #ifdef MP-TOUTIAO
      padding-bottom: 100upx;
      // #endif
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 5;
      letter-spacing: 1upx;
    }
    &__num {
      font-size: 24upx;
      color: #3bc5d2;
      letter-spacing: 1.5upx;
    }
    &__qr {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 30upx 0;
      padding: 10upx;
      width: 326upx;
      height: 326upx;
      border: 1upx solid rgba(204, 204, 204, 0.5);
    }
    &__code {
      overflow-x: auto;
      padding-left: 42upx;
      display: flex;
      align-items: center;
      width: 514upx;
      height: 78upx;
      background: #f9f9f9;
      border: 1upx solid #f5f5f5;
      border-radius: 14upx;
    }

    &__close {
      margin: 0 auto;
      margin-top: 43upx;
      width: 54upx;
      height: 54upx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/white-close.png)
        no-repeat;
      background-size: 100%;
    }

    &__swiper-box {
      position: relative;
    }
    &__swiper {
      width: 340upx;
      height: 340upx;
    }
    &__left-arrow {
      position: absolute;
      top: 50%;
      left: -25%;
      transform: translateY(-50%);
    }
    &__right-arrow {
      position: absolute;
      top: 50%;
      right: -20%;
      transform: translateY(-50%);
    }
  }
</style>
